<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统设置 - 后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="/admin/css/bootstrap.min.css">
<#--<link rel="stylesheet" type="text/css" href="/admin/css/style.css">-->
    <link rel="stylesheet" type="text/css" href="/admin/css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="/admin/images/icon/icon.png">
    <link rel="shortcut icon" href="/admin/images/icon/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/treeTable/css/jquery.treetable.css"/>
    <link rel="stylesheet" type="text/css" href="/treeTable/css/jquery.treetable.theme.default.css"/>
    <link rel="stylesheet" type="text/css" href="/treeTable/css/screen.css"/>
    <link rel="stylesheet" type="text/css" href="/ztree/zTreeStyle/zTreeStyle.css"/>
    <style type="text/css">
        body {
            color: #444;
            background-color: #EEE;
            overflow-x: hidden;
            padding-top: 50px;
            font-family: "Microsoft YaHei", "微软雅黑", "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        }

        .table thead tr th {
            font-size: 15px;
            font-weight: 500;
        }

    </style>
    <script type="text/javascript" src="/admin/js/jquery-2.1.4.min.js"></script>
    <script src="/admin/js/bootstrap.min.js"></script>
    <script src="/admin/js/admin-scripts.js"></script>
    <script type="text/javascript" src="/treeTable/jquery.treeTable.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script>
    <script type="text/javascript" src="/ztree/jquery.ztree.all.js"></script>
    <script>
        $(function () {

            //zTree
            var setting = {
                data: {
                    key: {
                        url: "xUrl"
                    },
                    simpleData: {//简单数据模式
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: 0
                    }
                },
                view: {
                    dblClickExpand: true,//双击节点时，是否自动展开父节点的标识
                    showLine: true,//是否显示节点之间的连线
                    fontCss: {'color': 'black', 'font-weight': '500'},//字体样式函数
                    selectedMulti: true //设置是否允许同时选中多个节点
                },
                check: {
                    chkboxType: {"Y": "", "N": ""},
                    chkStyle: "checkbox",//复选框类型
                    enable: true //每个节点上是否显示 CheckBox
                },
                edit: {
                    enable: false
                },
                callback: {
                    // onClick: zTreeClick
                }
            };

            function zTreeClick(event, treeId, treeNode) {
                return false;
            }

            var newCount = 1;

            function addHoverDom(treeId, treeNode) {
                var aObj = $("#" + treeNode.tId + "_a");
                if ($("#diyBtn_" + treeNode.id).length > 0) return;
                var editStr = ""
                        + "<span class='button add' id='diyBtn_" + treeNode.id
                        + "' title='" + treeNode.name + "' onfocus='this.blur();'></span>";
                aObj.append(editStr);
                var btn = $("#diyBtn_" + treeNode.id);

                if (btn) btn.bind("click", function () {
                    var zTree = $.fn.zTree.getZTreeObj("regionZTree");
                    zTree.addNodes(treeNode, {
                        id: (treeNode.id + newCount),
                        parentid: treeNode.id,
                        name: "new node" + (newCount++)
                    });
                    return false;
                });

            };

            function removeHoverDom(treeId, treeNode) {
                $("#diyBtn_" + treeNode.id).unbind().remove();
                $("#diyBtn_space_" + treeNode.id).unbind().remove();
            };


            var dominZTree2 = [
                {
                    name: "功能菜单",
                    id: "0",
                    parentId: "rwe34234",
                    children: [
                        {
                            name: "栏目管理",
                            id: "9a0f967ba7bb4fa89c5b4955de613dd9",
                            parentId: "9a0f967ba7bb4fa89c5b4955de613dd9",
                            checked: "true"
                        },
                        {
                            name: "文章管理",
                            id: "2",
                            parentId: "0"
                        },
                        {
                            name: "留言管理",
                            id: "3",
                            parentId: "0"
                        },
                        {
                            name: "用户管理",
                            id: "4",
                            parentId: "0"
                        },
                        {
                            name: "系统设置",
                            id: "5",
                            parentId: "0",
                            children: [
                                {
                                    name: "角色管理",
                                    id: "6",
                                    parentId: "5"
                                },
                                {
                                    name: "菜单管理",
                                    id: "7",
                                    parentId: "5"
                                }
                            ]
                        }
                    ]
                }

            ];

            // var zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree2);

            $.ajax({
                type: "post",
                url: "/back/sys/menu/show",
                data: {},
                async: false,
                dataType: "json",
                success: function (data) {
                    var treeObj = $.fn.zTree.init($("#regionZTree"), setting, data);
                    treeObj.expandAll(true);//ztree最
                    //设置根节点不能选中
                    var root = treeObj.getNodes()[0];
                    console.log(root)
                    treeObj.setChkDisabled(root, true);

                    var permissionIdsSize = '${permissionIds?size}';
                    if (permissionIdsSize > 0) {
                        <#list permissionIds as id>
                        var id = '${id}';//设置指定的ID
                        var node = treeObj.getNodeByParam('id', id);//根据节点数据的id属性搜索，获取条件完全匹配的节点数据
                        if (node) {//判断有查询到节点
                            // treeObj.selectNode(node,true);//选中指定节点
                            treeObj.checkNode(node, true, true);//选中指定节点
                            treeObj.updateNode(node);//更新节点
                        }
                        </#list>
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });

            //提交form表单
            $("#save").click(function () {
                //根据ztree的id获取ztree对象
                var treeObj = $.fn.zTree.getZTreeObj("regionZTree");
                //根据ztree上选中的节点,返回对象
                var nodes = treeObj.getCheckedNodes(true);
                // var nodes = treeObj.getNodes();
                // var nodes = treeObj.transformToArray(treeObj.getNodes());//根节点下的所有节点
                var array = new Array();
                var func = $("#func");

                for (var i = 0; i < nodes.length; i++) {
                    var id = nodes[i].id;
                    var name = nodes[i].name;
                    var parentId = nodes[i].parentId;
                    func.after("<input type='hidden' name='permissions[" + i + "].name' value='" + name + "'/>");
                    func.after("<input type='hidden' name='permissions[" + i + "].parentId' value='" + parentId + "'/>");
                    func.after("<input type='hidden' name='permissions[" + i + "].id' value='" + id + "'/>");
                }
                $("#fm1").submit();
            });

        });

        function del(id) {
            layer.confirm('您确定要删除？', {
                btn: ['是', '否'], //按钮
                icon: 2
            }, function () {
                layer.msg('删除成功', {icon: 1});
                location.href = "/back/sys/role/delete?id=" + id;
            });

        }

        function findPage(pageNo) {
            $("#pageNo").val(pageNo);
            $("#fm1").submit();
        }
    </script>
</head>
<body class="user-select" style="margin: 0px;padding: 0px;">
<div>
    <ul class="breadcrumb" style="margin: 0px;">
        <li>角色设置</li>
        <li>角色修改</li>
    </ul>
</div>

<div class="row">
    <div style="padding-left:25px;padding-top:20px;" class="col-md-5">
        <div class="table-responsive">
            <div class="center-block alert ${info?contains("成功")?string('alert-success','alert-danger')}  alert-dismissable ${(info!='')?string('','hide')}">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
            ${(info)!}
            </div>
            <form id="fm1" name="roleForm" action="/back/sys/role/update" method="post" autocomplete="off">
                <input id="func" type="hidden" name="functionIds">
                <input type="hidden" name="id" value="${role.id}">

                <div class="form-group">
                    <label for="category-alias">角色名称</label>
                    <input type="text" id="category-alias" name="roleName" value="${role.roleName}" class="form-control"
                           placeholder="角色名称"
                           required autocomplete="off">
                    <span class="prompt-text">“角色名称”是描述角色英文描述，如admin、superAdmin等。</span></div>

                <div class="form-group">
                    <label for="category-alias">角色中文名称</label>
                    <input type="text" id="category-alias" name="cname" value="${role.cname}" class="form-control"
                           placeholder="角色中文名称"
                           required autocomplete="off">
                    <span class="prompt-text">“角色中文名称”是描述角色的中文名称，如管理员、超级管理员等。</span></div>

                <div class="form-group">
                    <label for="category-name">菜单权限</label>
                    <ul id="regionZTree" class="ztree"></ul>
                    <span class="prompt-text">对左侧菜单进行编辑。</span>
                </div>
                <button class="btn btn-primary" id="save" type="button">提交修改</button>
            </form>
        </div>
    </div>

</body>
</html>
